<template name="appTokenCreationConfirm">

<h4 class="ui header pageHeader">
  <i class="tiny tags icon"></i>
  <div class="content">
    Token Creation Confirmation
  </div>
</h4>

<div id="tokenCreationConfirmation" class="ui red segment pageSegment">


  <h4 class="ui horizontal divider header">
    <i class="tags icon"></i>
    New Token Details
  </h4>

  <div class="ui items">
    <div class="item">
      <div class="content">
        <a class="header">{{tokenCreationConfirmation.name}} ({{tokenCreationConfirmation.symbol}})</a>
        <div class="description">
          <p></p>
        </div>
        <div class="extra wordBreak">
          Owner: {{#if bech32}}{{tokenCreationConfirmation.owner_b32}}{{else}}{{tokenCreationConfirmation.owner_hex}}{{/if}}<br />
          Decimals: {{tokenCreationConfirmation.decimals}}
        </div>
      </div>
    </div>
  </div>


  <h4 class="ui horizontal divider header">
    <i class="users icon"></i>
    Initial Token Holders
  </h4>

  <div class="ui relaxed divided list">
  {{#each tokenHolders}}
    <div class="item">
      <i class="large user middle aligned icon"></i>
      <div class="content">
        <a class="header wordBreak">{{#if bech32}}{{this.address_b32}}{{else}}{{this.address_hex}}{{/if}}</a>
        <div class="description">{{tokenCreationConfirmation.symbol}}: {{this.amount}}</div>
      </div>
    </div>
  {{/each}}
  </div>



  <h4 class="ui horizontal divider header">
    <i class="file icon"></i>
    Transaction Details
  </h4>

  <div class="ui stackable one column grid">
    <div class="column">
      <span>From <a class="ui wordBreak">{{#if bech32}}{{tokenCreationConfirmation.from_b32}}{{else}}{{tokenCreationConfirmation.from_hex}}{{/if}}</a></span>
      <br />
      <span>Fee <a class="ui">{{tokenCreationConfirmation.fee}}</a></span>
      <br />
      <span>OTS Key Index <a class="ui">{{tokenCreationConfirmation.otsKey}}</a></span>
    </div>
  </div>


  <div class="ui stackable two column grid">
    <div class="column center aligned">
      <button id="confirmToken" class="ui huge primary button red">Confirm Token Creation</button>
    </div>
    <div class="column center aligned">
      <button id="cancelToken" class="ui huge red button plain">Cancel Token Creation</button>
    </div>
  </div>


  <div id="relaying" class="ui icon message" style="display: none;">
    <br /><br />
    <i class="notched circle loading icon"></i>
    <div class="content">
      <div class="header">
        Just a moment
      </div>
      <p id="tokenRelayingMsg">Your token is being relayed into the QRL network...</p>
    </div>
  </div>


</div>

<div id="transactionFailed" class="ui red segment pageSegment" style="display: none;">
  <h4>Transaction Failed</h4>
  <p style="word-wrap: break-word; word-break: break-all;">
    Error! Your token has failed to relay into the QRL network.<br />
    Error message: {{transactionFailed}}
  </p>
</div>

</template>